<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 提示记录 -->
        <el-alert :title="`共 ${total} 条记录`" type="info" show-icon :closable="false"></el-alert>

        <!-- 表格区域 -->
        <el-table :data="logs" style="width: 100%">
          <el-table-column align="center" prop="type" label="操作类型"></el-table-column>
          <el-table-column align="center" prop="reviewer" label="操作人"></el-table-column>
          <el-table-column prop="title" label="执行结果"></el-table-column>
          <el-table-column align="center" prop="display_time" label="操作时间"></el-table-column>
          <el-table-column align="center" prop="forecast" label="描述"></el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <pagination :query-info="queryInfo" :total="total" @pagination="getLogsList()" />

        <!-- 分页功能 -->
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="limit"
          layout="prev, pager, next, sizes, jumper"
        ></el-pagination>-->
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as logs } from '@/api/base/logs'
import pagination from '../components/pagination'

export default {
  name: 'base-logs',
  data() {
    return {
      logs: [],
      total: 0,
      queryInfo: {
        page: 1,
        limit: 20
      },
      loading: false
    }
  },
  props: {},
  components: {
    pagination
  },
  created() {
    this.getLogsList()
  },
  methods: {
    // 获取日志列表
    async getLogsList() {
      try {
        this.loading = true
        const { data } = await logs({
          page: this.page,
          limit: this.limit
        })
        this.logs = data.items
        this.total = data.total
      } catch (error) {
        this.$message('获取日志失败，请稍后再试')
      }
      this.loading = false
    }

    // 监听页码条数的变化
    // handleSizeChange(newVal) {
    //   this.limit = newVal
    //   this.getLogsList()
    // },

    // 监听当前页码值的变化
    // handleCurrentChange(newVal) {
    //   this.page = newVal
    //   this.getLogsList()
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-alert {
  margin-bottom: 20px;
}
// /deep/.el-alert__closebtn {
//   display: none;
// }
.el-pagination {
  margin-top: 30px;
}
</style>
